<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Geohash Bounds Display</title>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css"
	media="screen, projection" />
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css"
	media="print" />
<!--[if lt IE 8]>
  <link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="/css/custom.css" type="text/css"
	media="screen, projection" />

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-364613-8']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<script type="text/javascript">

var rounding = Math.pow(10, 6);

var AthensLatlng = "";
var myOptions = ""
var map = "";
var geohashPolylines = [];

  function initialize() {
	  
    AthensLatlng = new google.maps.LatLng(37.971804, 23.727078);
    
    myOptions = {
      zoom: 5,
      center: AthensLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   	var refineIcon = new google.maps.MarkerImage('/img/mapNumIcons/redMarker.png',
               new google.maps.Size(32, 34),
               new google.maps.Point(0, 0),
               new google.maps.Point(16, 34));
       
    var redMarker =  new google.maps.Marker({
        position: AthensLatlng, 
        map: map,
        icon: refineIcon,
        title:"Drag me around!",
        zIndex: 100,
        draggable: true
    });   

    var redMarkerBounds = "";
    
    attachShowMarkerLocation(redMarker, map);
    calculateRects(redMarker);
           
	$('#latTxt').val(roundDigits(redMarker.getPosition().lat()));
	$('#lngTxt').val(roundDigits(redMarker.getPosition().lng()));


  }

  function attachShowMarkerLocation(marker, map) {
	  
    var infowindow = new google.maps.InfoWindow(
  	      { content: "Location",
  	        size: new google.maps.Size(50,50)
  	      });
    
    google.maps.event.addListener(marker, 'click', function() {
    	infowindow.setContent(marker.getPosition().toString());
    	infowindow.open(map,marker);
      });

    google.maps.event.addListener(marker, 'drag', function() {
    	$('#latTxt').val(roundDigits(marker.getPosition().lat()));
    	$('#lngTxt').val(roundDigits(marker.getPosition().lng()))
      });
  
    google.maps.event.addListener(marker, 'dragend', function() {
    	calculateRects(marker);
    });
  
  }

  function calculateRects(marker) {
	  	$.ajax({
    	    type: "GET",
    	    url: "/servlets/getGeohashBounds",
    	    data: {lat: marker.getPosition().lat(), lng: marker.getPosition().lng()},
    	    contentType: "application/json; charset=utf-8",
    	    dataType: "json",
    	    success: function(bounds) {
        	    redMarkerBounds = bounds;
    	    	drawGeohashBounds(redMarkerBounds);
    	    }
    	  });
   }
  
  
  function removePreviousGeohashBounds() {

	  for (var i = 0; i < geohashPolylines.length; i++) {
		  geohashPolylines[i].setMap(null);
	  }
	  geohashPolylines = [];
  }
  
  function drawGeohashBounds(data) {

	  removePreviousGeohashBounds();
	  
	  for (var s = 1; s < 11; s++) {
		  var boxBoundsArray = data[s]
		  var boxBounds = [
       	    new google.maps.LatLng(boxBoundsArray[4], boxBoundsArray[1]),
       	    new google.maps.LatLng(boxBoundsArray[2], boxBoundsArray[1]),
       	    new google.maps.LatLng(boxBoundsArray[2], boxBoundsArray[3]),
       	    new google.maps.LatLng(boxBoundsArray[4], boxBoundsArray[3]),
       	  ];

       	  var boundsRect = new google.maps.Polygon({
       	    paths: boxBounds,
       	    strokeColor: "#FF0000",
       	    strokeOpacity: 0.8,
       	    strokeWeight: 1,
       	    fillColor: "#FF0000",
       	    fillOpacity: 0.03,
       	    zIndex: s,
       	    map: map
       	  });

       	google.maps.event.addListener(boundsRect, 'mouseover', function() {
           	var ind = this.zIndex;
           	
       		$('#console').val("Resolution #" + ind + "\n" +
       	       		" Geohash:\n  " + data[ind][0] + "\n" +
       	       		" Width:\n  " + Math.round(data[ind][5]) + "m\n" +
       				" Height:\n  " + Math.round(data[ind][6]) + "m");
          });

        geohashPolylines.push(boundsRect);
       	  
	  }
  }
  
  function roundDigits(num) {
	  return Math.round(num * rounding) / rounding;
  }
  
</script>
</head>
<body onload="initialize()">
<div class="container">

<div class="backHome"><a href="/">Home</a></div>
<h1>Geohash Bounds Display</h1>
<hr />

<div class="span-16">
<fieldset><legend>Map</legend>
<div id="map_canvas" style="width: 600px; height: 600px;" align="center"></div>
</fieldset>
</div>

<div class="span-8 last">

<fieldset><legend>Instructions</legend>
<p>Drag the marker around to see the geohash bounds that it belongs
to.</p>
</fieldset>

<fieldset><legend>Coordinates</legend>
<p><label for="lat">Latitude: </label><br>
<input type="text" id="latTxt" name="lat" value="latitude here">
<br />
<label for="lng">Longtitude: </label><br>
<input type="text" id="lngTxt" name="lng" value="longtitude here">
<br />
</p>
</fieldset>

<fieldset><legend>Geohash Bounding Box Info</legend> <textarea
	style="width: 260px;" id="console"></textarea></fieldset>

</div>

</div>
</body>
</html>